<template>
	<div id="startup">
		<el-form :inline="true" class="demo-form-inline">
			<el-row >
				<el-col>
					<el-form-item label="流程名称：">
						<el-input v-model="processName" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="流程key：">
						<el-input v-model="processKey" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="状态：">
						<el-select v-model="stateValue" placeholder="请选择">
							<el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
			</el-row>
		</el-form>

		<div>
			<template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="name" label="流程名称"></el-table-column>
					<el-table-column prop="key" label="流程KEY" ></el-table-column>
					<el-table-column prop="version" label="版本"  width="180"></el-table-column>
					<el-table-column prop="suspended" label="状态"  width="180"></el-table-column>
					<el-table-column prop="description" label="描述"  width="180"></el-table-column>
					<el-table-column label="操作" width="150">
						<template scope="scope">
							<el-button @click="startUp(scope.row)" type="text" size="small">启动</el-button>
                            <el-button @click="activate(scope.row)" type="text" size="small">激活</el-button>
                            <el-button @click="hangUp(scope.row)" type="text" size="small">挂起</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage.page" :page-sizes="pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<div class="dialog">
			<el-dialog title="流程定义信息" :visible.sync="dialogVisible" :before-close="handleClose">
				<!--<ul>
					<li>请输入流程名称：<input type="text" v-model="inputProcessName" /></li>
				</ul>-->
				<div class="el-message-box__content">
					<div class="el-message-box__message">
						<p>请输入流程名称( <b style="color: red;">*</b>必填！默认与流程定义名称相同,为方便记忆,请输入自定义流程名称)</p>
					</div>
					<div class="el-message-box__input" style="">
						<div class="el-input inpt">
							<input autocomplete="off" placeholder="" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="inputProcessName">
						</div>
						<!--<div class="el-message-box__errormsg" style="visibility: hidden;"></div>-->
					</div>
					<form class="process-form">
						<fieldset>
							<legend>流程定义信息</legend>
							<div class="definition-info">
								<ul>
									<li>name：<span>{{definitionInfoName}}</span></li>
									<li>版本：<span>{{definitionInfoVersion}}</span></li>
								</ul>
							</div>
							<div>
								描述：<span>{{definitionInfoDescribe}}</span>
							</div>
						</fieldset>
					</form>
					<div class="el-message-box__message input-message">
						<p>流程优先级</p>
					</div>
					<div class="el-message-box__input">
						<el-select v-model="inputStateValue" placeholder="请选择">
							<el-option v-for="item in inputState" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
          </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'startup',
		data() {
			return {
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				state: [{
					label: '正常',
					value: 'normal',
				}, {
					label: '挂起',
					value: 'suspend',
				}],
				stateValue: '',
				classification: '',
				processName: '',
				processKey: '',
				establishSatrtTime: '',
				establishEndTime: '',
				tableData: [],
				currentPage: {
					page: 1,
					pageNum: 10,
				},
				pageSize: ['10', '15', '50'],
				total: 400,
				dialogVisible: false, //控制dialog
				inputProcessName: '', //输入流程名称
				inputStateValue: 'normal',
				inputState: [],
				processId: '',
				definitionInfoName: '', //流程名称
				definitionInfoVersion: '', //版本
				definitionInfoDescribe: '', //描述
			}
		},
		mounted: function() {
			var that = this;
			console.log(that.currentPage)
			var data = {
				searchName: that.processName,
				pageSize: that.currentPage.pageNum,
				currentPage: that.currentPage.page,
			};
			this.$http.post('http://localhost/act/processDefinition/getProcessDefinitions',
				data
			).then(function(data) {
				if(data.data.messageCode == 0) {
					for(var i=0;i<data.data.data.length;i++){
						if(data.data.data[i].suspended == false){
							data.data.data[i].suspended ="正常"
						}else{
							data.data.data[i].suspended ="挂起"
						}
					}
					that.tableData = data.data.data
					that.total = data.data.total
				}

			}, function(error) {

			})
		},
		methods: {
			search() {
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var that = this;
				var data = {
					searchName: that.processName,
					pageSize: that.currentPage.pageNum,
					currentPage: that.currentPage.page,
					key:that.processKey,
					status:that.stateValue,
				};
				console.log(this.pageSize)
				this.$http.post('http://localhost/act/processDefinition/getProcessDefinitions',
					data
				).then(function(data) {
					loading.close();
					if(data.data.messageCode == 0) {
						for(var i=0;i<data.data.data.length;i++){
						if(data.data.data[i].suspended == false){
							data.data.data[i].suspended ="正常"
						}else{
							data.data.data[i].suspended ="挂起"
						}
					}
						that.tableData = data.data.data
						that.total = data.data.total
					} else {
						this.$message({
							message: data.data.message,
							type: 'warning'
						});
					}
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})

			},
			startUp(index) {
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var vm = this;
				console.log(index)
				vm.inputState = [];
				vm.processId = index.id;
				vm.definitionInfoName = index.name;
				vm.definitionInfoVersion = index.version;
				vm.definitionInfoDescribe = index.description;
				this.$http.post('http://localhost/act/processInstance/prepareStart?processDefinitionId=' + index.id, ).then(function(data) {
					console.log(data.data.object)
					loading.close();
					vm.inputProcessName = data.data.object.processDefinition.name
					console.log(data.data.object.processPriorities.priorities)
					var priorities = data.data.object.processPriorities.priorities
					for(var i in priorities) {
						var selsect = {}
						selsect.label = priorities[i];
						selsect.value = i;
						vm.inputState.push(selsect)
					}
					vm.dialogVisible = true;
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})

			},
			submit() {
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var vm = this;
				if(vm.inputProcessName == "") {
					vm.$message.error('请输入流程名称');
					return;
				}
				var dataT = {
					processDefinitionId: vm.processId,
					processPriority: vm.inputStateValue,
					searchName: vm.inputProcessName
				}
				this.$http.post('http://localhost/act/processInstance/startProcessInstance',
					dataT
				).then(function(data) {
					loading.close();
					console.log(data.data.messageCode)
					if(data.data.messageCode != 0) {
						vm.$message.error(data.data.message);
					} else {
						vm.$message({
							message: data.data.message,
							type: 'success'
						});
					}
					vm.dialogVisible = false;
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})
			},
			handleSizeChange(val) { //	 console.log(val)
				var vm = this
				console.log(val)
				vm.currentPage.pageNum = val;
				vm.search()
			},
			handleCurrentChange(val) {
				var vm = this
				console.lo
				console.log(`当前页: ${val}`);
				vm.currentPage.page = val
				vm.search()

			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			activate(item){
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var vm=this;
				var dataT={
					processDefinitionId:item.id,
				};
				var qs = require('qs');
				this.$http.post('http://localhost/act/processDefinition/activateProcessDefinition',qs.stringify(dataT)).then(
					
					function(data){
						loading.close();
						vm.$message({
						message: "激活成功",
						type: 'success'
					});
					}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})
			},
			hangUp(item){
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var vm=this;
				var dataT={
					processDefinitionId:item.id,
				};
				var qs = require('qs');
				this.$http.post('http://localhost/act/processDefinition/suspendProcessDefinition',qs.stringify(dataT)).then(
					function(data){
						loading.close()
						vm.$message({
						message: "挂起成功",
						type: 'success'
					});
					}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})
			},
		},
	}
</script>

<style>
	
</style>